<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='./vue.js'></script>
</head>

<body>
    <div id='app'>
        <async-box></async-box>
    </div>
</body>
<script>

    const app = Vue.createApp({
        data() {
            return {}
        },
        methods: {},
    })

    app.component('async-box', Vue.defineAsyncComponent(() => {
        return new Promise((resolve, reject) => {

            setTimeout(() => {
                // 假设该组件的内容模版来源于服务器
                const res = '<h1> 从服务器中获取到的内容组件 </h1>'

                if (!res) {
                    // 成功
                    resolve({
                        template: res,
                        data() {
                            return {
                            }
                        },
                        methods: {},
                        computed: {}
                    })
                } else {
                    // 失败
                    reject({
                        template: '<h1> 404 </h1>',
                        data() {
                            return {
                            }
                        },
                    })
                }

            }, 6000)

        })
    }))

    const vm = app.mount('#app')
</script>

</html>